<template>
  <div>
    <div class="page-container">
      <el-aside width="120px">
        <div v-for="item in pageOptions" :key="item.value" class="sys-page">
          <div class="page-title">{{ item.label }}</div>
          <ul class="sys-page-option">
            <li
              v-for="optionsItem in item.options"
              :key="optionsItem.value"
              class="sys-page-item"
              :class="{ 'page-active': pageActive === optionsItem.value }"
              @click="onClickSetPageActive(optionsItem.value)"
            >
              {{ optionsItem.label }}
            </li>
          </ul>
        </div>
      </el-aside>
      <el-container>
        <el-main>
          <component
            :is="pageActive"
            :query="lowCodeQuery"
            @handleAddLowCode="handleAddLowCode"
            @handleEditLowCode="handleEditLowCode"
            @handleBackRouter="handleBackRouter"
          />
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import customerForm from './components/customerForm'
import microPage from './components/microPage'
import userPage from './components/userPage'
import lowCodeIframe from './components/lowCodeIframe'
import descModal from './components/descModal'
import { PAGE_SIGN } from '@/views/wxaNewBuildModule/config'
export default {
  components: { customerForm, microPage, userPage, lowCodeIframe, descModal },
  data() {
    return {
      pageOptions: [
        {
          label: '系统页面',
          value: PAGE_SIGN.SYS_PAGE,
          options: [
            {
              label: '微页面',
              value: PAGE_SIGN.MICRO_PAGE
            },
            {
              label: '个人中心',
              value: PAGE_SIGN.USER_PAGE
            }
          ]
        },
        // {
        //   label: '通用页面',
        //   value: PAGE_SIGN.BASE_PAGE,
        //   options: [
        //     {
        //       label: '自定义表单',
        //       value: PAGE_SIGN.CUSTOMER_FORM
        //     }
        //   ]
        // },
        {
          label: '通用模块',
          value: PAGE_SIGN.BASE_MODAL,
          options: [
            {
              label: '装修模块',
              value: PAGE_SIGN.DESC_MODAL
            }
          ]
        }
      ],
      pageActive: PAGE_SIGN.MICRO_PAGE,
      lowCodeQuery: {} // 低代码操作参数
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    onClickSetPageActive(active) {
      this.pageActive = active
    },
    handleAddLowCode(params) {
      this.pageActive = 'lowCodeIframe'
      this.lowCodeQuery = params
    },
    handleEditLowCode(params) {
      this.pageActive = 'lowCodeIframe'
      this.lowCodeQuery = params
      console.log('params===', params)
    },
    handleBackRouter() {
      this.pageActive = this.lowCodeQuery.from
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.page-container {
  margin-left: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 0;
  background-color: white;
  //border-radius: 8px;
}
.el-aside,
.el-main {
  height: calc(100vh - 30px);
  //border-radius: 4px;
}
.el-aside {
  border-right: 1px solid whitesmoke;
}
.page-title {
  color: #131313;
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
}
.page-active {
  //background-color: whitesmoke;
  transition: color 0.1s ease-in-out;
  color: $primary !important;
}
.sys-page {
  text-align: center;
  //border-bottom: 1px solid whitesmoke;
  padding: 10px 0;
  &-option {
    padding: 0 10px;
  }
  &-item {
    padding: 10px 0;
    font-size: 14px;
    color: #636363;
  }
}
</style>
